<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义指令</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <!-- 需求：
    (1) 自定义一个指令v-big可以使得文本中的值放大十倍
    (2) 自定义一个指令v-fbind可以让其input自动获得焦点
  -->
  <div id="root">
     <div v-pre>{{n}}</div>
    <!-- (6) 自定义指令官方推荐用-连接命名 -->
     <span v-big-number="n">放大10倍后的n为：</span>
     <button @click="n++">点击加一：</button>{{n}}
     <input type="text" v-fbind:value="n">
  </div>

  <div id="root2">
    <input type="text" v-fbind:value="x">
  </div>

  <script type='text/javascript'>
      
      // (9) 全局指令：写法和全局过滤器类似
      Vue.directive('fbind',{
                  // (8) 要注意指令directives里面的this是window！！！因为这里面
                  // Vue该传给你的值element,binding，都有了Vue认为不需要再提供this了
                  bind(element,binding){
                    console.log(this);
                    element.value = binding.value
                  },
                  // (5) element.focus()获得焦点必须在页面被加载之后再调用，否则不起效果
                  inserted(element,binding){
                    console.log(this);
                    element.focus()
                  },
                  update(element,binding){
                    console.log(this);
                    element.value = binding.value
                    element.focus()
                  }
      })
     
      new Vue({
          el:'#root',
          data:{
             n:1,
          },
          // (3) 写在directives里面，这种是函数式声明指令
          directives:{
            // (7) 但对象的属性名不支持 字符-，因为要在原来的基础上加上引号
             'big-number'(element,binding){
                 element.innerText = binding.value * 10
             },
            // (4) 对象式声明指令，可以分别 在绑定、页面被插入(被加载)、页面更新 三个阶段写对应逻辑
            //  fbind:{
            //       // (8) 要注意指令directives里面的this是window！！！因为这里面
            //       // Vue该传给你的值element,binding，都有了Vue认为不需要再提供this了
            //       bind(element,binding){
            //         console.log(this);
            //         element.value = binding.value
            //       },
            //       // (5) element.focus()获得焦点必须在页面被加载之后再调用，否则不起效果
            //       inserted(element,binding){
            //         console.log(this);
            //         element.focus()
            //       },
            //       update(element,binding){
            //         console.log(this);
            //         element.value = binding.value
            //         element.focus()
            //       }
            //  }
          }
      }) 
  </script>


  <script type='text/javascript'>

      new Vue({
          el:'#root2',
          data:{
            x:1
          }
      })
  </script>
</body>
</html>